<!DOCTYPE html>
<html>
<head>
    <title>乐8小城预约</title>
    <!-- custom-theme -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--<script type="application/x-javascript">
        addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
        function hideURLbar(){ window.scrollTo(0,1); }
    </script>-->
    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <link rel="stylesheet" href="/public/static/css/layer.css" >
    <script src="/public/static/js/layer.js"></script>
    <link rel="stylesheet" href="/public/static/css/style.css"  type="text/css" media="all" >

</head>
<body class="bg agileinfo">
<h1 class="agile_head text-center">乐8小城预约</h1>
<p class="text-center"><!--你的预约信息为：2018-11-15日，1号场上半场。如需取消预约请拨打0745-5566457--></p>
<div class="container w3">
    <form action="#" method="post" class="agile_form">
        <h2 class="w3layouts text-center">预约须知：请提前预约</h2>

        <input placeholder="日期" name="reserve_date" class="date" id="datepicker" type="text" value="" readonly="readonly" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '';}" required=""/>
        <div class="list_agileits_w3layouts">
            <div class="section_class_agileits sec-right">
                <select name="changdi" id="changdi" required="">
                    <option value="">选择场地</option>
                    <!--<option value="1">1号场</option>
                    <option value="2">2号场</option>
                    <option value="3">3号场</option>-->
                </select>
            </div>
            <div class="section_class_agileits sec-right">
                <select name="changci" id="changci" required="">
                    <option value="">选择场次</option>
                    <!--<option value="3">全场</option>
                    <option value="1">上半场</option>
                    <option value="2">下半场</option>-->
                </select>
            </div>
            <div class="clear"></div>
        </div>
        <input type="text" placeholder="请输入会员卡号" value="{$userData.membercard}" name="membercard" class="name agileits" required=""/>
        <input type="text" placeholder="请输入联系人" value="{$userData.name}" name="name" class="name agileits" required=""/>
        <input type="text" placeholder="请输入电话" value="{$userData.mobile}" name="mobile" class="name agileits" required=""/>
        <div class="list_agileits_w3layouts">
            <div class="section_class_agileits sec-left">
                <select name="adult">
                    <option value="">成年人数</option>
                    <option value="1">1人</option>
                    <option value="2">2人</option>
                    <option value="3">3人</option>
                    <option value="4">4人</option>
                </select>
            </div>
            <div class="section_class_agileits sec-right">
                <select name="kid">
                    <option value="">儿童人数</option>
                    <option value="1">1人</option>
                    <option value="2">2人</option>
                    <option value="3">3人</option>
                    <option value="4">4人</option>
                </select>
            </div>
            <div class="clear"></div>
        </div>
    </form>
    <div class="submit">
        <input type="submit" onclick="subInfo()"  value="提交">
    </div>
</div>
<div class="agileits_w3layouts_copyright text-center">
    <p> <a href="#">乐8小城</a></p>
</div>
<!--start-date-piker-->
<link rel="stylesheet" href="/public/static/css/jquery-ui.css" />
<script src="/public/static/js/jquery-ui.js"></script>
<script>

    //日期栏改变，搜索当天是否有可用场次
    $("#datepicker").change(function(){
        var reserve_date = $("input[name='reserve_date']").val();
        $.get("{:url(MODULE_NAME.'/usabledi')}",{'reserve_date':reserve_date}, function(result){
            var data = JSON.parse(result);
            //检测暂无场地关键字 如果有 做提示用
            var changdiStr = data.info.changdi;
            if(changdiStr.indexOf("暂无场地")!=-1){
                layer.open({
                    content: '暂无场地',
                    skin: 'msg',
                    time: 2 //2秒后自动关闭
                });
            }

            $("#changdi").empty();
            $("#changdi").append("<option value=''>选择场地</option>");
            //追加到场地
            $("#changdi").append(data.info.changdi);

            //初始化场次
            $("#changci").empty();
            $("#changci").append("<option value=''>选择场次</option>");
        });
    })

    //场地栏改变，搜索当天是否有可用场次
    $("#changdi").change(function(){
        var reserve_date = $("input[name='reserve_date']").val();
        var changdi = $("#changdi").val();
        $.get("{:url(MODULE_NAME.'/usableci')}",{'reserve_date':reserve_date,'changdi':changdi}, function(result){
            var data = JSON.parse(result);
            $("#changci").empty();
            $("#changci").append("<option value=''>选择场次</option>");
            //追加到场次
            $("#changci").append(data.info.changci);

        });
    })

    // 表单POST提交
    function submit(obj) {
        $.ajax({
            url: 'index/index',
            type: 'post',
            data: obj,
            success: function (res) {
                console.log(res);
                var data = JSON.parse(res);
                if(data.info === 'OK'){
                    layer.open({
                        content: '预约成功',
                        skin: 'msg',
                        time: 2 //2秒后自动关闭
                    });
                    window.location.reload();

                }else{
                    layer.open({
                        content: data.info,
                        skin: 'msg',
                        time: 2 //2秒后自动关闭
                    });
                }
            },
            error: function(e) {
                 console.log(e)

            }
        })
    }


    //点击提交
    function subInfo(){
        var reserve_date = $("input[name='reserve_date']").val()
        var changdi = $("select[name='changdi']").val()
        var changci = $("select[name='changci']").val()
        var membercard = $("input[name='membercard']").val()
        var name = $("input[name='name']").val()
        var mobile = $("input[name='mobile']").val()
        var adult = $("select[name='adult']").val()
        var kid = $("select[name='kid']").val()
        var obj = {
            reserve_date: reserve_date && reserve_date.trim(),
            changdi: changdi && changdi.trim(),
            changci: changci && changci.trim(),
            membercard: membercard && membercard.trim(),
            name: name && name.trim(),
            mobile: mobile && mobile.trim(),
            adult: adult && adult.trim(),
            kid: kid && kid.trim(),
        }
        var verif = verification(obj);
        if(!verif){
            return;
        }
        submit(obj);
    }

    /**
     * 验证表单数据
     * @param {表单数据对象} obj
     */
    function verification(obj) {
        if(!obj.reserve_date) {
            layer.open({
                content: '请选择日期',
                skin: 'msg',
                time: 2 //2秒后自动关闭
            });
            return false;
        }
        if(!obj.changdi) {
            layer.open({
                content: '请输入场地',
                skin: 'msg',
                time: 2 //2秒后自动关闭
            });
            return false;
        }

        if(!obj.changci) {
            layer.open({
                content: '请选择场次',
                skin: 'msg',
                time: 2 //2秒后自动关闭
            });
            return false;
        }
        if(!obj.membercard) {
            layer.open({
                content: '请输入卡号',
                skin: 'msg',
                time: 2 //2秒后自动关闭
            });
            return false;
        }
        if(!obj.name) {
            layer.open({
                content: '请输入联系人',
                skin: 'msg',
                time: 2 //2秒后自动关闭
            });
            return false;
        }
        if(!obj.mobile) {
            layer.open({
                content: '请输入电话',
                skin: 'msg',
                time: 2 //2秒后自动关闭
            });
            return false;
        }
        return true;
    }

    $(function() {
        $( "#datepicker" ).datepicker({
            minDate: 0, // 当前日期之前的 5 天
            maxDate: 10,  // 当前日期的 0 天，就是当天
            dateFormat:'yy-mm-dd',
            dayNamesMin: ['日','一','二','三','四','五','六'],
            monthNames: ['一月','二月','三月','四月','五月','六月', '七月','八月','九月','十月','十一月','十二月']
        });
    });
</script>
<!-- /End-date-piker -->
</body>
</html>